<template>
<!--  <div class="mainContent">
    <div class="part1">
      <div class="situaItem">
        <div class="situaNode">

        </div>
        <div class="situaNode"><ArealDistribution /></div>
      </div>
      <div class="situaItem">
        <div class="situaNode"><CenterShow /></div>
      </div>
      <div class="situaItem">
        <div class="situaNode"><LocationCount /></div>
        <div class="situaNode"><SiteCodeCount /></div>
      </div>
    </div>
  </div>-->
  <div class="mainContent" align="center">
   <div class="cantor">
     <div class="left">
       <div class="KeySites">
         <div class="title">
           <span class="title_span">重点场所</span>
           <img src="./components/img/title_right.png" width="40" height="9" alt="">
         </div>
<!--         <div v-for="(item,index) in [{label:'放舱医院',class:'item_button'},{label:'隔离点',class: 'item_button item_button_Isolation'},{label:'高速口',class: 'item_button item_button_point'}] ">
           <div class="item_button_body">
             <div  :class="[{item_button_active: isActive === index},item.class]"  @click="leftBtnClick(index)">
               {{item.label}}
             </div>
             <div class="triangle" :style="isActive === index?{opacity:1}:{opacity:0}"></div>
           </div>
           <div class="item_button_bottom"></div>
         </div>-->
         <div class="item_button_body">
           <div class="item_button" :class="{item_button_active: isActive === 0}">
             方舱医院
           </div>
           <div class="triangle" :style="isActive === 0?{opacity:1}:{opacity:0}"></div>
         </div>

         <div class="item_button_bottom"></div>
         <div id="Isolation" class="item_button item_button_Isolation" >
           隔离点
         </div>
         <div class="item_button_bottom"></div>
         <div class="item_button">
           高速口
         </div>
         <div class="item_button_bottom"></div>
         <div class="item_button item_button_point">
           医学观察点
         </div>
         <div class="item_button_bottom"></div>
         <div class="item_button">
           重点医院
         </div>
       </div>
       <div class="KeySites">
         <div class="title">
           <span class="title_span">城乡社区</span>
           <img src="./components/img/title_right.png" width="40" height="9" alt="">
         </div>
<!--         item_button_township-->
         <div class="item_button">
           乡镇监控
         </div>
         <div class="item_button_bottom"></div>
         <div class="item_button item_button_village">
           村（社区）监控
         </div>
       </div>
       <div class="KeySites" style="margin-bottom: 0">
         <div class="title">
           <span class="title_span">卡口监控</span>
           <img src="./components/img/title_right.png" width="40" height="9" alt="">
         </div>
<!--         item_button_gu-->
         <div class="item_button ">
           固墙卡点
         </div>
         <div class="item_button_bottom"></div>
         <div class="item_button item_button_huang" style="background: url('/src/views/urbanRuralCommunity/components/img/haung_point.png') no-repeat;background-size: 100% 100%;">
           黄寨卡点
         </div>
         <div class="item_button_bottom"></div>
         <div class="item_button item_button_da" style="background: url('/src/views/urbanRuralCommunity/components/img/da_point.png') no-repeat;background-size: 100% 100%;">
           大武卡点
         </div>
         <div class="item_button_bottom"></div>
         <div class="item_button item_button_he" style="background: url('/src/views/urbanRuralCommunity/components/img/he_point.png') no-repeat;background-size: 100% 100%;">
           赫岗卡点
         </div>
         <div class="item_button_bottom"></div>
         <div class="item_button item_button_tan" style="background: url('/src/views/urbanRuralCommunity/components/img/tan_point.png') no-repeat;background-size: 100% 100%;">
           谭庄卡点
         </div>
       </div>
     </div>
     <div class="map">
       <MapShow @playVideo="playVideo"/>
     </div>
     <div>
       <div class="right">
         <div class="right_div">
           <!--            <div class="right_div_title">
                         <img src="./components/img/title_left.png" width="40" height="9" alt="">
                         <span style="margin-right: 5px;margin-left: 5px">监控AI与场所码</span>
                         <img src="./components/img/title_right.png" width="40" height="9" alt="">
                       </div>-->
           <ReturnShow />
         </div>
         <div class="right_div">
           <siteMonitoring />
         </div>
         <div class="right_div">
           <RuralMonitoring />
         </div>
       </div>

     </div>

   </div>
   <div class="bottom" align="center">
      <div class="bottom_item bottom_item_camera">
        <div class="bottom_item_span">
          城乡社区监控
          <span class="bottom_item_number">28
          </span>
          个
        </div>
      </div>
     <div class="bottom_item bottom_item_home">
        <div class="bottom_item_span">
          重点场所监控
          <span class="bottom_item_number">15
          </span>
          个
        </div>
      </div>
     <div class="bottom_item">
        <div class="bottom_item_span">
          卡口监控
          <br>
          <span class="bottom_item_number">23
          </span>
          个
        </div>
      </div>
    </div>
   <div class="dialog">
     <div class="video">
       <div class="video_content">
<!--         <video  src="https://assets.honqun.cn/video/v6.mp4" controls="controls" style="height: 100%;width: 100%">
           您的浏览器不支持 video 标签。
         </video>-->
         <hlsVideo :area="videoUrl"></hlsVideo>
       </div>
       <div  class="video_bottom">
         <div class="video_bottom_item">
             <img src="./components/img/person.png" alt="" class="video_bottom_item_logo">
             AR识别人流量<span class="video_bottom_num">{{flow.person}}</span>人
         </div>
         <div class="video_bottom_item">
           <img src="./components/img/car.png" alt="" class="video_bottom_item_logo">
             AR识别车流量<span class="video_bottom_num">{{flow.car}}</span>辆
         </div>
       </div>
     </div>
   </div>
  </div>
</template>

<script setup>
import ScanningCode from "@/views/siteCodeManage/components/ScanningCode.vue";
import ArealDistribution from "@/views/siteCodeManage/components/ArealDistribution.vue";
import CenterShow from "@/views/siteCodeManage/components/CenterShow.vue";
import LocationCount from "@/views/siteCodeManage/components/LocationCount.vue";
import SiteCodeCount from "@/views/siteCodeManage/components/SiteCodeCount.vue";
import ReturnShow from "@/views/urbanRuralCommunity/components/ReturnShow.vue";
import siteMonitoring from "@/views/urbanRuralCommunity/components/siteMonitoring.vue";
import RuralMonitoring from "@/views/urbanRuralCommunity/components/RuralMonitoring.vue";
import MapShow from "@/views/urbanRuralCommunity/components/MapShow.vue";
import hlsVideo from "@/views/urbanRuralCommunity/components/HlsVideo.vue";
/*let videoUrl='11111'
function playVideo(val) {
  // console.log('val---------',val)
  videoUrl=val.areaCode
  console.log('videoUrl----',videoUrl)
}*/
</script>
<script>
export default {
  data(){
    return{
      videoUrl:'',
      flow:{
        person:'238',
        car:'145'
      },

      isActive:0
    }
  },
    mounted() {
      //location.reload()
    },
    methods:{
    playVideo(val) {
      console.log('val---------',val)
      this.videoUrl=val
      this.flow.car=Math.floor(Math.random() * 200)+100
      this.flow.person=Math.floor(Math.random() * 300)+100
      // console.log('videoUrl----',videoUrl)
    },
    leftBtnClick(index){
      console.log('index',index)
      this.isActive=index
    }
  }
}
</script>
<style lang="less" scoped>
.mainContent {
  height: 86vh;
  display: flex;
  flex-direction: column;
  flex: 1;
  .part1 {
    height: 100%;
    display: flex;
    flex: 2;
    flex-direction: row;

    .situaItem {
      flex: 1;
      display: flex;
      flex-direction: column;

      .situaNode {
        flex: 1;
        margin: 0.8vh;

      }
    }
  }
}
.map{
  width: 1000px;
  height:680px;
  position:absolute;
  left: 280px;
  //top: 66px;
}
.video{
  position: relative;
  top:20px;
}
.video_content{
  width: 390px;
  height: 235px;
}
.cantor{
  display: flex;
  .left{
    margin-left: 20px;
    margin-top: 10px;
  }
  .right{
    position:absolute;
    right: 20px;
    margin-top: 10px;
  }
  .KeySites{
    width: 197px;
    padding-bottom: 8px;
    margin-bottom: 16px;
    background: url('./components/img/divbg.png') no-repeat;
    background-size: 100% 100%;

    .title{
      display: flex;
      padding-top: 5px;
      margin-left: 16px;
      margin-bottom: 6px;
      align-items: center;
      .title_span{
        margin-right: 14px;
        font-size: 14px;
        font-family: Source Han Sans CN,serif;
        font-weight: bold;
        line-height: 28px;
        color: #10F3FC;
      }
    }
    .item_button_body{
      display: flex;
      width: 97%;
      justify-content: end;
      align-items: center;
    }
    .item_button{
      width:171px ;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 13px;
      font-family: Source Han Sans CN,serif;
      //font-weight: bold;
      //color: #45E8FA;
      color: rgba(255, 255, 255, 0.66);
      opacity: 1;
      //letter-spacing: 30px;
      background: url('./components/img/hospital.png') no-repeat;
      background-size: 100% 100%;
    }
    .item_button_Isolation{
      background: url('./components/img/Isolation.png') no-repeat !important;
      background-size: 100% 100% !important;
    }
    .item_button_point{
      background: url('./components/img/point.png') no-repeat !important;
      background-size: 100% 100% !important;
    }
    .item_button_township{
      background: url('./components/img/township_monitoring_button.png') no-repeat !important;
      background-size: 100% 100% !important;
    }
    .item_button_village{
      background: url('./components/img/village_monitoring.png') no-repeat !important;
      background-size: 100% 100% !important;
    }
    .item_button_gu{
      background: url('./components/img/gu_point.png') no-repeat !important;
      background-size: 100% 100% !important;
    }
    .item_button_da{
      background: url('./components/img/da_point.png') no-repeat !important;
      background-size: 100% 100% !important;
    }
    .item_button_huang{
      background: url('./components/img/haung_point.png') no-repeat !important;
      background-size: 100% 100% !important;
    }
    .item_button_he{
      background: url('./components/img/he_point.png') no-repeat !important;
      background-size: 100% 100% !important;
    }
    .item_button_tan{
      background: url('./components/img/tan_point.png') no-repeat !important;
      background-size: 100% 100% !important;
    }
    .item_button_bottom{
      width: 100%;
      height: 6px;
      background: url('./components/img/bottom.png') no-repeat;
      background-size: 100% 100%;
    }
  }
  .item_button_active{
    font-size: 13px;
    font-family: Source Han Sans CN,serif;
    font-weight: bold !important;
    color: #45E8FA !important;
  }
  //.triangle{
  //  border-top:solid 4px transparent;
  //  border-right:solid 8px #FFEC86 ;
  //  border-bottom:solid 4px transparent;
  //}
  /*.item_button_active:after{
    content: "";    width: 0;
    height: 0;
    position: relative;
    top: 0px;
    left: 64px;
    border-top:solid 4px transparent;
    border-right:solid 8px #FFEC86 ;
    border-bottom:solid 4px transparent;
  }*/
  .right_div{
    width:407px;
    margin-bottom: 15px;
    background:url('./components/img/right_div_bg.png') no-repeat;
    background-size: 100% 100%;
    .right_div_title{
      font-size: 14px;
      height: 27px;
      padding: 5px;
      font-family: SourceHanSansCN-Medium,serif;
      line-height: 27px;
      color: #FFFFFF;
    }
  }
}
.bottom{
  width: 100%;
  height: 180px;
  position:absolute;
  bottom:0;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: 140px;
  background: url('./components/img/bottom_bg.png') no-repeat;
  background-size: 100% 100%;
  .bottom_item{
    width: 110px;
    height: 170px;
    font-size: 18px;
    font-family: Source Han Sans CN,serif;
    font-weight: 500;
    line-height: 60px;
    color: #FFFFFF;
    background: url('./components/img/bottom_item_button.png') no-repeat;
    background-size: 100% 100%;
    .bottom_item_span{
      font-size: 16px;
      margin-top: 18px;
      font-family: Source Han Sans CN,serif;
      font-weight: 400;
      line-height: 32px;
      color: #FFFFFF;
    }
    .bottom_item_number{
      color: #FFBA77;
      font-size: 26px;
    }
  }
  .bottom_item_camera{
    background: url('./components/img/camera.png') no-repeat !important;
    background-size: 100% 100% !important;
  }
  .bottom_item_home{
    background: url('./components/img/home.png') no-repeat !important;
    background-size: 100% 100% !important;
  }
}
.dialog{
  width: 484px;
  height: 354px;
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  top:180px;
  right:480px;
  z-index: 999;
  background: url('./components/img/dialog.png') no-repeat;
  background-size: 100% 100%;
  .video_bottom{
    display:flex;
    align-items: center;
    position: relative;
    top: -10px;
    column-gap: 16px;
    font-size: 14px;
    font-family: Source Han Sans CN,serif;
    font-weight: 500;
    line-height: 31px;
    color: #FFFFFF;
    .video_bottom_item_logo{
      width:32px;
      height:35px;
      position:relative;
      top: 15px;
    }
    .video_bottom_num{
      font-size: 22px;
      font-family: Source Han Sans CN,serif;
      font-weight: 500;
      line-height: 31px;
      color: #37FAC6;
    }
  }
}
.triangle{
  width:0px;
  height:0px;
  position: relative;
  border-right:10px solid #FFEC86;
  border-top:5px solid transparent;
  border-bottom:5px solid transparent;
}
</style>
